<template>
    <el-dialog
        :title="title"
        custom-class="el-dialog-600"
        :visible.sync="visible"
    >
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            label-width="80px"
            :size="$formSize"
        >
            <el-form-item label="角色名" prop="name">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.name"
                        auto-complete="off"
                        placeholder="请输入菜单名称"
                    ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-col :span="23">
                    <el-radio
                        clearable
                        v-model="form.status"
                        v-for="item in statusRadio"
                        :key="item.id"
                        :label="item.id"
                    >
                        {{ item.name }}
                    </el-radio>
                </el-col>
            </el-form-item>

            <el-form-item label="备注" prop="remarks">
                <el-col :span="23">
                    <el-input type="textarea" v-model="form.remarks"></el-input>
                </el-col>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import Options from "@/global/local-data/system";
import { adminRole as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            title: "", // 标题

            // 表单
            formRef: "formRef", // ref

            statusRadio: Options.role.statusRadio,

            form: {
                name: "",
                status: 1,
                remarks: "",
            },

            // 验证
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入角色名",
                        trigger: "change",
                    },
                    {
                        min: 2,
                        max: 16,
                        message: "字符长度2到16个字符",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        /**
         * 初始化
         */
        init() {
            this.title = this.id ? "编辑" : "新增";

            if (this.id) this.getById();
        },

        /**
         * 获取详情
         */
        async getById() {
            const { code, data } = await this.$axios.get(Api.getById, {
                params: { id: this.id },
            });
            
            if (code === 200) {
                this.form = {
                    name: data.name,
                    status: Number(data.status),
                    remarks: data.remarks,
                };
            }
        },

        /**
         * 提交表单
         */
        async onSubmit() {
            // 表单验证，通过就禁止按钮
            this.$refs[this.formRef].validate((valid) => {
                // 禁止按钮
                if (valid) this.loading = true;
            });

            if (this.loading) {
                let url = this.id ? Api.update : Api.add;

                let params = {
                    name: this.form.name,
                    status: this.form.status,
                    remarks: this.form.remarks,
                };

                if (this.id) params.id = this.id;

                const { code, msg } = await this.$axios.post(url, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.visible = false;
                    this.$emit("refreshList");
                } else {
                    this.$msg.error(msg);
                }

                this.loading = false;
            }
        },
    },
    watch: {
        // 监听弹窗开关状态来控制组件的初始化
        visible(status) {
            if (status) {
                this.init();
            } else {
                this.$refs[this.formRef].resetFields();
            }
        },
    },
};
</script>